<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户违约管理系统</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/main.css">

    <script src="js/chart.js"></script>
</head>

<body>
    <div id="app">
        <!-- 登录页面 -->
        <div id="login-page" class="page active">
            <div class="login-container">
                <div class="login-card">
                    <div class="login-header">
                        <h1>客户违约管理系统</h1>
                        <p>请登录您的账户</p>
                    </div>
                    <form id="login-form" class="login-form">
                        <div class="form-group">
                            <label for="username">用户名</label>
                            <input type="text" id="username" name="username" required>
                        </div>
                        <div class="form-group">
                            <label for="password">密码</label>
                            <input type="password" id="password" name="password" required>
                        </div>
                        <button type="submit" class="btn btn-primary">登录</button>
                    </form>
                    <div class="login-footer">
                        <a href="#" id="register-link">注册新账户</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 注册页面 -->
        <div id="register-page" class="page">
            <div class="login-container">
                <div class="login-card">
                    <div class="login-header">
                        <h1>注册新账户</h1>
                        <p>创建您的管理员账户</p>
                    </div>
                    <form id="register-form" class="login-form">
                        <div class="form-group">
                            <label for="reg-username">用户名</label>
                            <input type="text" id="reg-username" name="username" required>
                        </div>
                        <div class="form-group">
                            <label for="reg-password">密码</label>
                            <input type="password" id="reg-password" name="password" required>
                        </div>
                        <button type="submit" class="btn btn-primary">注册</button>
                    </form>
                    <div class="login-footer">
                        <a href="#" id="login-link">返回登录</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主应用页面 -->
        <div id="main-page" class="page">
            <div class="app-container">
                <!-- 侧边栏 -->
                <nav class="sidebar">
                    <div class="sidebar-header">
                        <h2>违约管理系统</h2>
                    </div>
                    <ul class="sidebar-menu">
                        <li class="menu-item active" data-page="dashboard">
                            <i class="icon">📊</i>
                            <span>仪表盘</span>
                        </li>
                        <li class="menu-item" data-page="customers">
                            <i class="icon">👥</i>
                            <span>客户管理</span>
                        </li>
                        <li class="menu-item" data-page="breach-applications">
                            <i class="icon">⚠️</i>
                            <span>违约申请</span>
                        </li>
                        <li class="menu-item" data-page="breach-records">
                            <i class="icon">📋</i>
                            <span>违约记录</span>
                        </li>
                        <li class="menu-item" data-page="recovery-applications">
                            <i class="icon">🔄</i>
                            <span>恢复申请</span>
                        </li>
                        <li class="menu-item" data-page="recovery-records">
                            <i class="icon">📄</i>
                            <span>恢复记录</span>
                        </li>
                        <li class="menu-item" data-page="settings">
                            <i class="icon">⚙️</i>
                            <span>系统设置</span>
                        </li>
                    </ul>
                    <div class="sidebar-footer">
                        <button id="logout-btn" class="btn btn-secondary">退出登录</button>
                    </div>
                </nav>

                <!-- 主内容区域 -->
                <main class="main-content">
                    <header class="main-header">
                        <h1 id="page-title">仪表盘</h1>
                        <div class="user-info">
                            <span id="current-user">管理员</span>
                        </div>
                    </header>

                    <!-- 仪表盘页面 -->
                    <div id="dashboard-content" class="page-content active">
                        <div class="stats-grid">
                            <div class="stat-card">
                                <div class="stat-icon">👥</div>
                                <div class="stat-info">
                                    <h3 id="total-customers">0</h3>
                                    <p>总客户数</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">⚠️</div>
                                <div class="stat-info">
                                    <h3 id="pending-breaches">0</h3>
                                    <p>待审核违约</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">🔄</div>
                                <div class="stat-info">
                                    <h3 id="pending-recoveries">0</h3>
                                    <p>待审核恢复</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">✅</div>
                                <div class="stat-info">
                                    <h3 id="completed-today">0</h3>
                                    <p>今日完成</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 行业统计模块 -->
                    <div class="statistics-section">
                        <div class="section-header">
                            <h3>行业统计</h3>
                            <div class="year-selector">
                                <select id="industry-year-select" class="form-select">
                                    <option value="2024">2024年</option>
                                    <option value="2023">2023年</option>
                                    <option value="2025">2025年</option>
                                </select>
                            </div>
                        </div>

                        <div class="chart-container">
                            <h4>行业违约统计</h4>
                            <div class="chart-row">
                                <div class="chart-col">
                                    <canvas id="industry-breach-pie-chart"></canvas>
                                </div>
                                <div class="chart-col">
                                    <canvas id="industry-breach-line-chart"></canvas>
                                </div>
                            </div>
                        </div>

                        <div class="chart-container">
                            <h4>行业恢复统计</h4>
                            <div class="chart-row">
                                <div class="chart-col">
                                    <canvas id="industry-recovery-pie-chart"></canvas>
                                </div>
                                <div class="chart-col">
                                    <canvas id="industry-recovery-line-chart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 区域统计模块 -->
                    <div class="statistics-section">
                        <div class="section-header">
                            <h3>区域统计</h3>
                            <div class="year-selector">
                                <select id="region-year-select" class="form-select">
                                    <option value="2024">2024年</option>
                                    <option value="2023">2023年</option>
                                    <option value="2025">2025年</option>
                                </select>
                            </div>
                        </div>

                        <div class="chart-container">
                            <h4>区域违约统计</h4>
                            <div class="chart-row">
                                <div class="chart-col">
                                    <canvas id="region-breach-pie-chart"></canvas>
                                </div>
                                <div class="chart-col">
                                    <canvas id="region-breach-line-chart"></canvas>
                                </div>
                            </div>
                        </div>

                        <div class="chart-container">
                            <h4>区域恢复统计</h4>
                            <div class="chart-row">
                                <div class="chart-col">
                                    <canvas id="region-recovery-pie-chart"></canvas>
                                </div>
                                <div class="chart-col">
                                    <canvas id="region-recovery-line-chart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 客户管理页面 -->
                    <div id="customers-content" class="page-content">
                        <div class="content-header">
                            <button id="add-customer-btn" class="btn btn-primary">新增客户</button>
                        </div>
                        <div class="table-container">
                            <table id="customers-table" class="data-table">
                                <thead>
                                    <tr>
                                        <th>客户号</th>
                                        <th>客户名</th>
                                        <th>性别</th>
                                        <th>区域</th>
                                        <th>行业</th>
                                        <th>联系方式</th>
                                        <th>集团</th>
                                        <th>违约情况</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 违约申请页面 -->
                    <div id="breach-applications-content" class="page-content">
                        <div class="content-header">
                            <button id="new-breach-btn" class="btn btn-primary">新建违约申请</button>
                        </div>
                        <div class="table-container">
                            <table id="breach-applications-table" class="data-table">
                                <thead>
                                    <tr>
                                        <th>审核编号</th>
                                        <th>客户号</th>
                                        <th>客户名</th>
                                        <th>违约原因</th>
                                        <th>严重程度</th>
                                        <th>外部等级</th>
                                        <th>申请时间</th>
                                        <th>审核状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 违约记录页面 -->
                    <div id="breach-records-content" class="page-content">
                        <div class="content-header">
                            <div class="filter-group">
                                <select id="breach-status-filter" class="form-select">
                                    <option value="">全部状态</option>
                                    <option value="待审核">待审核</option>
                                    <option value="审核通过">审核通过</option>
                                    <option value="审核未通过">审核未通过</option>
                                </select>
                                <button id="refresh-breach-records" class="btn btn-secondary">刷新</button>
                            </div>
                        </div>
                        <div class="table-container">
                            <table id="breach-records-table" class="data-table">
                                <thead>
                                    <tr>
                                        <th>审核编号</th>
                                        <th>客户号</th>
                                        <th>客户名</th>
                                        <th>性别</th>
                                        <th>区域</th>
                                        <th>行业</th>
                                        <th>集团</th>
                                        <th>违约原因</th>
                                        <th>认定人</th>
                                        <th>申请时间</th>
                                        <th>严重程度</th>
                                        <th>外部等级</th>
                                        <th>备注</th>
                                        <th>审核状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 恢复申请页面 -->
                    <div id="recovery-applications-content" class="page-content">
                        <div class="content-header">
                            <button id="new-recovery-btn" class="btn btn-primary">新建恢复申请</button>
                        </div>
                        <div class="table-container">
                            <table id="recovery-applications-table" class="data-table">
                                <thead>
                                    <tr>
                                        <th>恢复审核编号</th>
                                        <th>违约审核编号</th>
                                        <th>客户号</th>
                                        <th>客户名</th>
                                        <th>恢复原因</th>
                                        <th>申请时间</th>
                                        <th>审核状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 恢复记录页面 -->
                    <div id="recovery-records-content" class="page-content">
                        <div class="content-header">
                            <div class="filter-group">
                                <select id="recovery-status-filter" class="form-select">
                                    <option value="">全部状态</option>
                                    <option value="待审核">待审核</option>
                                    <option value="审核通过">审核通过</option>
                                    <option value="审核未通过">审核未通过</option>
                                </select>
                                <button id="refresh-recovery-records" class="btn btn-secondary">刷新</button>
                            </div>
                        </div>
                        <div class="table-container">
                            <table id="recovery-records-table" class="data-table">
                                <thead>
                                    <tr>
                                        <th>恢复审核编号</th>
                                        <th>客户号</th>
                                        <th>客户名</th>
                                        <th>违约原因</th>
                                        <th>严重程度</th>
                                        <th>外部等级</th>
                                        <th>认定人</th>
                                        <th>认定申请时间</th>
                                        <th>恢复原因</th>
                                        <th>审核状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 系统设置页面 -->
                    <div id="settings-content" class="page-content">
                        <div class="settings-section">
                            <h3>违约原因管理</h3>
                            <div class="table-container">
                                <table id="breach-reasons-table" class="data-table">
                                    <thead>
                                        <tr>
                                            <th>原因编号</th>
                                            <th>违约原因</th>
                                            <th>是否启用</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="settings-section">
                            <h3>恢复原因管理</h3>
                            <div class="table-container">
                                <table id="recovery-reasons-table" class="data-table">
                                    <thead>
                                        <tr>
                                            <th>原因编号</th>
                                            <th>恢复原因</th>
                                            <th>是否启用</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <div id="modal-overlay" class="modal-overlay">
        <div class="modal">
            <div class="modal-header">
                <h3 id="modal-title">标题</h3>
                <button id="modal-close" class="modal-close">&times;</button>
            </div>
            <div class="modal-body" id="modal-body">
                <!-- 动态内容 -->
            </div>
        </div>
    </div>

    <!-- 加载提示 -->
    <div id="loading" class="loading">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
    </div>

    <!-- 消息提示 -->
    <div id="toast" class="toast"></div>

    <script src="js/utils.js"></script>
    <script src="js/api.js"></script>
    <script src="js/app.js"></script>
</body>

</html>